<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>

<html>
    <head>
       
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

        <style>
            body{ background-color: ivory; }
            canvas{border:1px solid red;}
        </style>

        <script>
//            $(function(){
//
//                var canvas=document.getElementById("canvas");
//                var ctx=canvas.getContext("2d");
//                canvas.focus()
//                
//                var w=canvas.width;
//                var h=canvas.height;
//                var offsetX=0;
//                var offsetY=0;
//                var rectX=0;
//                var rectY=0;
//
//                
//                
//                var snake = {
//                    offsetX : 20,
//                    offsetY : 20
//                }
//                var current_key = {
//                    pressed:true
//                }
//                
//                var TOP = 38;
//                var LEFT = 37;
//                var RIGHT = 39;
//                var BOTTOM = 40;
//                
//                var snake_keydown = function(p){
//                    //console.log(p);
//                    switch(p.which){
//                        case TOP : 
//                            current_key.pressed = false
//                            break;
//                        case LEFT : 
//                            current_key.pressed = false
//                            break;
//                        case RIGHT : 
//                            current_key.pressed = false
//                            break;
//                        case BOTTOM : 
//                            current_key.pressed = false
//                            break;                       
//                    }
//                };
//                var snake_keyup = function(p){
//                    //console.log(p);
//                    switch(p.which){
//                        case TOP : 
//                            current_key.pressed = false
//                            break;
//                        case LEFT : 
//                            current_key.pressed = false
//                            break;
//                        case RIGHT : 
//                            current_key.pressed = false
//                            break;
//                        case BOTTOM : 
//                            current_key.pressed = false
//                            break;
//                        
//                    }
//                };
//                canvas.addEventListener("keydown", snake_keydown,false)
//                canvas.addEventListener("keyup", snake_keyup,false)
//                setInterval(function(){drawGrid();},100);
//                function drawGrid(){
//                    if(!current_key.pressed){
//                        alert("haha")
//                    }
//                    
//                    // move the grid
//                    //                    offsetX+=5;
//                    //                    offsetY+=5;
//                    if(offsetX==20){offsetX=0;}
//                    if(offsetY==20){offsetY=0;}
//                    //                    rectX+=5;
//                    //                    rectY+=5;
//                    if(rectX==w){rectX=0;}
//                    if(rectY==h){rectY=0;}
//
//                    ctx.save();
//                    ctx.clearRect(0,0, w, h);
//                    ctx.strokeStyle="gray";
//                    ctx.beginPath();
//                    // vertical grid lines
//                    for(var x=offsetX;x<w;x+=20){
//                        ctx.moveTo(x,0);
//                        ctx.lineTo(x,h);    
//                    }
//                    // horizontal grid lines
//                    for(var y=offsetY;y<h;y+=20){
//                        ctx.moveTo(0,y);
//                        ctx.lineTo(w,y);    
//                    }
//                    // "moving" rect
//                    ctx.fillStyle="red";
//                    ctx.rect(rectX,rectY,20,20);
//
//                    ctx.stroke();
//                    ctx.fill();
//                    ctx.restore();
//
//                }
//
//            }); // end $(function(){});
        </script>

    </head>

    <body>
        <canvas id="canvas" width=300 height=300></canvas>
    </body>
</html>
